<template>
  <breadcrumb></breadcrumb>
  <el-button type="primary" @click="openModal">添加分类</el-button>
  <el-table
      :data="treeData"
      row-key="cat_id"
      :tree-props="{ children: 'children', hasChildren: 'haschildren' }"
      border
      fit
      style="width: 100%"
  >
    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
    <el-table-column
        prop="cat_name"
        label="分类名称"
        sortable
        align="center"
    ></el-table-column>
    <el-table-column prop="cat_deleted" align="center" label="是否有效" sortable>
      <!-- 作用域插槽 -->
      <template v-slot="scope">
        <!-- 添加判断，根据数值显示标签 -->
        <el-tag v-if="scope.row.cat_deleted === false" type="success" round
        ><el-icon><SuccessFilled /></el-icon
        ></el-tag>
        <el-tag v-else type="danger" round
        ><el-icon><CircleCloseFilled /></el-icon
        ></el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="cat_level" align="center" label="排序">
      <!-- 作用域插槽 -->
      <template v-slot="scope">
        <!-- 添加判断，根据level显示标签 -->
        <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" v-else-if="scope.row.cat_level === 1"
        >二级</el-tag
        >
        <el-tag type="warning" v-else>三级</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="cat_id" align="center" label="id" class-name="cat_id" ></el-table-column>
    <el-table-column label="操作" align="center" sortable>
      <!-- 作用域插槽 -->
      <template #default="{row}">
        <el-button
            type="primary"
            @click="() => {EditSelect(row.cat_name,row.cat_id)}" :icon="Edit" size="small"
        >编辑</el-button
        >
        <el-button type="danger" @click="() => {delSelect(row.cat_id)}" :icon="Delete" size="small"
        >删除</el-button
        >
      </template>
    </el-table-column>>
  </el-table>
  <el-pagination
      v-model:current-page="count"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, total]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
  />
  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="分类名称">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="选择分类">
        <el-cascader :options="selectData" :props = "SelectProps" v-model="selectKeys" @change="handleSelect"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary"  @click="addSelect">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="EditShow" title="Shipping address">
    <el-form>
      <el-form-item label="分类名称">
        <el-input v-model="EditName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="EditShow = false">取消</el-button>
        <el-button type="primary" @click="EditSure">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup >
import { Edit ,Delete} from '@element-plus/icons-vue'
import {onMounted, ref, watch,reactive} from 'vue';
import {addCategories, delCategories, EditCategories, getGoodsCategories} from "../../apis/goods.js";
const treeData = ref([]);
const count = ref(1);
const pageSize = ref(5);
const total = ref(1);
const dialogFormVisible = ref(false);
const form = reactive({
  name: '',
})
let selectKeys = ref([])
let selectData = ref([]);
const SelectProps = {
  label:'cat_name',
  value:'cat_level',
  children:'children',
  checkStrictly: true,
}
const addForm = ref({
  cat_name: '',
  cat_pid:0,
  cat_level:0
})
const EditName = ref('')
const EditShow = ref(false)
const EditId = ref('')
const EditSelect = (name,id) => {
  EditShow.value = true;
  EditName.value = name;
  EditId.value = id;
}
const EditSure = () => {
  EditShow.value = false;
  EditCategories(EditId.value,EditName.value).then(res => {
    getCategories();
  })
}
const delSelect = (id) => {
  delCategories(id).then(() => {
    getCategories();
  })
}
const addSelect = () => {
  addCategories(form.name,addForm.value.cat_pid,addForm.value.cat_level).then(() => {
    getCategories();
  })
  dialogFormVisible.value = false

}
const handleSelect = () => {
  console.log(selectKeys.value)
  if(selectKeys.value.length>0){
    addForm.value.cat_pid = selectKeys.value[selectKeys.value.length-1]
    addForm.value.cat_level = selectKeys.value.length
  }else{
    addForm.value.cat_pid = 0
    addForm.value.cat_level = 0
  }
  console.log(addForm.value)
}
let arr = []
const value = ref('');
const openModal = () => {
  dialogFormVisible.value = true;
  selectData = arr.map(item => {
    return {
      ...item,
      children:item.children.map(item => {
        return {
          ...item,
          children:''
        }
      })
    }
  })
}
const getCategories = () => {
  getGoodsCategories(3,count.value,pageSize.value).then(res => {
    treeData.value = res.data.result;
    arr = res.data.result;
    total.value = res.data.total;
  })
}
watch(count,() => {
  getCategories()
})

watch(pageSize,() => {
  getCategories();
})
onMounted(() => {
  getCategories();
})
</script>

<style scoped lang="scss">
:deep(.el-cascader){
  width: 1000px;
}
//:deep(.cat_id) {
//  display: none;
//}
</style>
